﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/deferred</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
            div {
                margin: 3px;
                width: 50px;
                height: 50px;
                position: absolute;
                left: 10px;
                top: 300px;
                background-color: yellow;
                display:none;
            }
            div.newcolor {
                background-color: red;
            }
  		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		    console.log( "jQuery version: " + $.fn.jquery );
        </script>
    </head>
    <body>
        <h1>jQuery/deferred部分展示</h1>		
		<table>
            <tr>
                <td class="syntax">deferred.always()</td>
                <td>添加无论resolved或rejected都执行的handler.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.catch()</td>
                <td>添加rejected时会执行的handler.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.done()</td>
                <td>添加resolved时会执行的handler.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.fail()</td>
                <td>添加rejected时会执行的handler.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.isRejected()</td>
                <td>true if rejected</td>
            </tr>
            <tr>
                <td class="syntax">deferred.isResolved()</td>
                <td>true if resolved.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.notify()</td>
                <td>call the progressCallback that is added by .then() or progress().</td>
            </tr>
            <tr>
                <td class="syntax">deferred.notifyWith()</td>
                <td>同上, 但增加了context入参.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.pipe()</td>
                <td>deprecated</td>
            </tr>
            <tr>
                <td class="syntax">deferred.progress()</td>
                <td>添加progressCallback.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.promise()</td>
                <td>将入参obj改造为一个Deferred's Promise object. </td>
            </tr>
            <tr>
                <td class="syntax">deferred.reject()</td>
                <td>Rject a deferred obj.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.rejectWith()</td>
                <td>Rject a deferred obj with context arg.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.resolve()</td>
                <td>Resolve a deferred obj.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.resolveWith()</td>
                <td>Resolve a deferred obj with context arg.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.state()</td>
                <td>the deferred obj state</td>
            </tr>
            <tr>
                <td class="syntax">deferred.then()</td>
                <td>add handler.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.Deferred()</td>
                <td>创建deferred obj.</td>
            </tr>
            <tr>
                <td class="syntax">deferred.when()</td>
                <td>由deferred obj创建一个promise object.</td>
            </tr>
            <tr>
                <td class="syntax">.promise()</td>
                <td>创建一个关联的promise object.</td>
            </tr>
        </table>
        <p></p>
    <hr/>
    请打开console观察输出.
    
    
    <button id="resolve">resolve</button>
    <button id="reject">reject</button>
    <button id="progress">notify</button>
    <button id="resolve2">resolve2</button>
    <button id="reject2">reject2</button>
    <button id="progress2">notify2</button>
    <p id="alwaysed"> ALWAYS:</p>
    <p id="resolved"> RESOLVED:</p>
    <p id="rejected"> REJECTED:</p>
    <p id="notify"> NOTIFY:</p>

    <script>
        function alwaysedFunc(){
            $("#alwaysed").append(" A ");
        }
        function resolvedFunc(){
            $("#resolved").append(" R ");
        }
        function rejectedFunc(){
            $("#rejected").append(" J ");
        }
        function notifyFunc(){
            $("#notify").append(" N ");
        }
        

        $("#resolve").click(function(){
            var d = $.Deferred();
            d.always(alwaysedFunc)
                .done(resolvedFunc)
                .fail(rejectedFunc)
                .progress(notifyFunc);
            d.resolve();
        });
        $("#reject").click(function(){
            var d = $.Deferred();
            d.always(alwaysedFunc)
                .done(resolvedFunc)
                .fail(rejectedFunc)
                .progress(notifyFunc);
            d.reject();
        });
        $("#progress").click(function(){
            var d = $.Deferred();
            d.always(alwaysedFunc)
                .done(resolvedFunc)
                .fail(resolvedFunc)
                .progress(notifyFunc);
            d.notify();
        });
        $("#resolve2").click(function(){
            var d = $.Deferred();
            d.always(alwaysedFunc)
            .then(resolvedFunc, rejectedFunc, notifyFunc);
            d.resolve();
        });
        $("#reject2").click(function(){
            var d = $.Deferred();
            d.always(alwaysedFunc)
                    .then(resolvedFunc, rejectedFunc, notifyFunc);
            d.reject();
        });
        $("#progress2").click(function(){
            var d = $.Deferred();
            d.always(alwaysedFunc)
                    .then(resolvedFunc, rejectedFunc, notifyFunc);
            d.notify();
        });
    </script>

    </body>
</html>
